import { defineComponent, computed } from 'vue';
import ConditionGroupItem from './ConditionGroupItem';
import { DeleteOutlined } from '@ant-design/icons-vue';
import './style/conditionGroupItem.less';
const ConditionGroupProps = {
    conditionData: {
        type: Object,
        default: () => {
            return {};
        }
    },
    parentData: {
        type: Object,
        default: () => {
            return {};
        }
    },
    selectedCondition: {
        type: Object,
        default: () => {
            return {};
        }
    }
};
const conditionGroup = {
    AND: '且',
    OR: '或'
};
export default defineComponent({
    name: 'ConditionGroupItem',
    props: ConditionGroupProps,
    slots: ['expressionSlot'],
    emits: ['selectCondition', 'deleteCondition'],
    setup(props, { emit, slots }) {
        // 是否展示逻辑运算符
        const showLogicalOperator = computed(() => {
            // 如果当前表达式的操作符与父级的表达式相同，则不显示当前表达式的运算符
            if (props.conditionData.operator === props.parentData.operator) {
                return false;
            }
            // 如果表达式不存在子节点，或者子节点小于2个，则不显示操作符
            if (!props.conditionData.children || props.conditionData.children.length < 2) {
                return false;
            }
            return true;
        });
        function handleSelectCondition(conditionData, parentData) {
            emit('selectCondition', conditionData, parentData);
        }
        function handleDeleteCondition(conditionData, parentData) {
            emit('deleteCondition', conditionData, parentData);
        }
        // 处理条件格式插槽
        function handleDealExpressionSlots(slotsData) {
            return slots.expressionSlot && slots.expressionSlot(slotsData);
        }
        // 处理条件列表
        function handleDealList(item) {
            let reset;
            if (item.children && item.children.length) {
                reset = (<ConditionGroupItem class="condition-group" conditionData={item} parentData={props.conditionData} selectedCondition={props.selectedCondition} onSelectCondition={(conditionData, parentData) => handleSelectCondition(conditionData, parentData)} onDeleteCondition={handleDeleteCondition} v-slots={{ expressionSlot: props => handleDealExpressionSlots(props) }}/>);
            }
            else {
                reset = (<div>
            <div class="condition-item" onClick={() => handleSelectCondition(item, props.conditionData)}>
              {/**通过作用域插槽将当前节点的数据透传给使用组件的地方，使其自定义表达式的渲染方式**/}
              {handleDealExpressionSlots({
                        expression: item.expression,
                        node: item,
                        parentNode: props.conditionData
                    })}
              <div class="delete-icon-wrapper">
                {/**删除当前表达式节点的icon**/}
                {<DeleteOutlined onClick={e => {
                            e.stopPropagation();
                            handleDeleteCondition(item, props.conditionData);
                        }}/>}
              </div>
            </div>
            {/*选中表达式组时，展示新增条件的占位符*/}
            {props.selectedCondition === item && (<div class="condition-item">
                <div class="condition-placeholder"/>
              </div>)}
          </div>);
            }
            return <div key={item.key}>{reset}</div>;
        }
        return () => (<div class="condition-group-item-wrapper">
        <div class="condition-group-item">
          {showLogicalOperator.value && (<div class="logical-operator" onClick={() => handleSelectCondition(props.conditionData, props.parentData)}>
              {conditionGroup[props.conditionData.operator]}
            </div>)}
          {/*条件列表 */}
          <div class="condition-list">{props.conditionData.children.map(item => handleDealList(item))}</div>
        </div>
        {/*选中表达式组时，展示新增条件的占位符*/}
        {props.selectedCondition === props.conditionData && (<div class="condition-item">
            <div class="condition-placeholder"/>
          </div>)}
      </div>);
    }
});
//# sourceMappingURL=ConditionGroupItem.jsx.map